<!-- 账号、设备、围栏、区域数据展示 -->
<template>
  <div class="container">
    <div class="header" >
          <div class="head-one"></div>
          <div class="font-num">
            <p>账号数量</p>
            {{ accountNumber }}
          </div>
          <div class="head-two"></div>
          <div class="font-num">
              <p>设备数量</p>
              {{ deviceNumber }}
          </div>
          <div class="head-three"></div>
          <div class="font-num">
              <p>围栏数量</p>
              {{ fenceNumber }}
          </div>
          <div class="head-four"></div>
          <div class="font-num">
              <p>区域数量</p>
              {{ areaNumber }}
          </div>
        </div>
  </div>
</template>

<script>
import { getDeviceSum, getAccountStatistics, getAreaSum, getFenceSum } from '../api/statics/index'
export default {
  data () {
    return {
      accountNumber: '',
      deviceNumber: '',
      fenceNumber: '',
      areaNumber: ''
    }
  },
  mounted () {
    this.numberCount()
  },
  methods: {
    // 数量统计
    numberCount () {
      // 设备人员在线统计
      getDeviceSum()
        .then((res) => {
          console.log(res)
          this.deviceNumber = res.data.data.deviceCount
        })
      // 账户统计
      getAccountStatistics()
        .then((res1) => {
          console.log(res1)
          this.accountNumber = res1.data.data.accountCount
        })
      // 区域统计
      getAreaSum()
        .then((res2) => {
          console.log(res2)
          this.areaNumber = res2.data.data.areaCount
        })
      // 账号设备统计
      getFenceSum()
        .then((res3) => {
          console.log(res3)
          this.fenceNumber = res3.data.data.count
        })
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.head-one {
  background-image: url(../assets/img/账号数量-默认状态.png);
  background-size: 100% 100%;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: inline-block;
}
.head-one:hover {
  background-image: url(../assets/img/账号数量-悬停状态.png);
}
.head-two {
  background-image: url(../assets/img/设备数量-默认状态.png);
  background-size: 100% 100%;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: inline-block;
}
.head-two:hover {
  background-image: url(../assets/img/设备数量-悬停状态.png);
}
.head-three {
  background-image: url(../assets/img/围栏数量-默认状态.png);
  background-size: 100% 100%;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: inline-block;
}
.head-three:hover {
  background-image: url(../assets/img/围栏数量-悬停状态.png);
}
.head-four {
  background-image: url(../assets/img/区域数量-默认状态.png);
  background-size: 100% 100%;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: inline-block;
}
.head-four:hover {
  background-image: url(../assets/img/区域数量-悬停状态.png);
}
.font-num {
  color: aliceblue;
  font-size: 6px;
  width: 50px;
  margin-left: -20px;
  padding-top: 30px;
  display: inline-block;
}
</style>
